Estoy aprendiendo Javascript y tengo un problema al usar la importación/exportación para modularizar mi código. Traté de aprender esto leyendo esto y esto en MDN Web Docs (Mozilla), pero fallé. Sé que esto ya se ha preguntado aquí, pero no pude solucionar el problema .
El error que recibo en el terminal del navegador web es: Uncaught SyntaxError: Cannot use import statement outside a module
Insertaré un pequeño ejemplo de cómo traté de usar importar/exportar:
índice.html :
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> </head> <body> <h1 class="title">Example</h1> <button class="title-button">Change title</button> <!-- I tried adding this line but nothing has changed: <script type="module" src="module.js"></script> ---> <script src='main.js'></script> </body> </html>módulo.js :
const changeTitle = newTitle => { const title = document.querySelector(".title"); title.innerHTML = newTitle; } export { changeTitle };principal.js :
import { changeTitle } from "./module"; const titleButton = document.querySelector(".title-button"); titleButton.addEventListener("click", () => { let newTitle = prompt("Enter new title:"); changeTitle(newTitle); });Nota : los tres archivos están en la misma carpeta.
Gracias por tu tiempo. Lo siento si cometí un error en esta publicación.
El atributo type="module" debe agregarse en el script que usa la declaración de importación (en este caso, main.js ). Mi error fue intentar agregar type="module" en module.js en lugar de main.js